<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wangEditor</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="content-body">
            <div id="div" style="height:10vh;">
            </div>
        <h1>使用wangEditor富文本框</h1>
        <div id="div1">
            <p>请输入文字</p>
        </div>
        <div class="btn">
            <button id="btn1">发表</button>
        </div>
    </div>
</body>
<script src="./wangEditor/wangEditor.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script>
    var E = window.wangEditor
    var editor = new E('#div1')
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/upload';
    // 自定义fileName
    // editor.customConfig.uploadFileName = 'day';

    editor.customConfig.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        var formdata = new FormData();
        files.forEach(e => {
            formdata.append("day",e);
        });
        

        $.ajax({
            method:"post",
            url:"/upload",
            //是否加工请求数据
            processData: false,
            //不再让jquery对contentType进行修改。(contentType中要有form-data分隔符)
            contentType: false,
            data:formdata,
        })
        .done(function(d){
            d.arr.forEach(a => {
                insert(a)
            });
        });
        

        // 上传代码返回结果之后，将图片插入到编辑器中
        // insert(imgUrl)
    }

    editor.create();
    // 可禁用编辑器
    editor.$textElem.attr('contenteditable', true);

    // 点击事件(获取内容)
    document.getElementById('btn1').addEventListener('click',function(){
        // sessionStorage.clear(); localStorage.clear();
        var site = localStorage.getItem("site");
        if(site){
            site += '*#' + editor.txt.html();
        }else{
            site = editor.txt.html();
        }
        localStorage.setItem("site", site);
        // 成功跳转路径
        setTimeout(() => {
            location.href = '/form';
        }, 1000);
    });
    
</script>
</html>